<template>
  <div >
    <div  id="myChart2" :style="{width: '500px', height: '350px',}"></div>
  </div>
</template>
<script>
var that = this;
export default {
  data() {
    return {
      datax: [8,77,22,88,36,26,95],
      datax2:[5,85,16,74,21,85,32]
    };
  },
  mounted() {
    this.drawLine(); //按照默认值预先绘制图表
  },
  created() {
    // this.$axios.get("drawLine").then((response) => {
    //   if (response.data.statusCode == 200) {
    //     this.datax.length = 0; //数组清空
    //     for (let i = 0; i < response.data.data.length; i++) {
    //       this.datax.push(response.data.data[i]);
    //     }
    //     console.log(this.datax);
    //   }
    // });
  },
  watch: {
    datax: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        //do something
        this.drawLine();
      },
      deep: true,
    },
  },
  methods: {
    drawLine() {
      var colors = ['#23b7e5', '#d14a61', '#675bba'];
      // 1、基于准备好的dom，初始化echarts实例
      let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      //2、构造图表数据
      let options = {
    color: colors,
    title: {
        text: '投诉-- 业主满意度',
        right: 20,
         textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
               
                fontSize: 16,
                color:'#23b7e5'
            },
    },
    // legend:{
    //     orient: 'vertical',
    //    left: 10,
    // },
    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        top: 80,
        left:90,
        bottom: 50
    },
    xAxis: [
        {
            name:'月份',
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color:'#23b7e5',
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '满意度  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['1月', '3月','5月','7月','9月','11月']
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero:false,
                lineStyle: {
                    color:'#23b7e5'
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '满意度  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['1月', '3月','5月','7月','9月','11月']
        }
    ],
    yAxis: [
        {  
            name:'满意度',
            type: 'value' ,
             min: 0,  //一定要设置最小刻度
             max: 100,  //一定要设置最大刻度
             minInterval: 20, //这个可自己设置刻度间隔
            splitLine: {// 控制网格线是否显示
                                      //show: false,   // 网格线是否显示
                                      lineStyle: {//  改变样式
                                          width:'1',
                                          color: '#23b7e5'   // 修改网格线颜色    
                                      }              
              },              

             axisLabel: {
                    formatter: function (value, index) {  //Y轴的自定义刻度值，对应上图
                        if (index == 0) {
                            value = 0
                        } else if (index == 1) {
                            value = 20
                        } else if (index == 2) {
                            value = 40
                        } else if (index == 3) {
                            value = 60
                        } else if (index == 4) {
                            value = 80
                        } else if (index == 5) {
                            value = 100
                        }
                        return value+'%';
                    }
                },
                axisLine: {
                lineStyle: {
                    color:'#23b7e5',
                }
            },
        }     
    ],
    series: [
        {
            name: '第一次',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            data:this.datax
        },
        {
            name: '第二次',
            type: 'line',
            smooth: true,
            data:this.datax2
        }
        
    ]
    
};

      // 3、绘制图表

      myChart2.setOption(options);
    },
  },
};
</script>
<style scoped>
</style>